<template>
    <div>
        <b-jumbotron header="Сведения об экспертах" class="text-center">
            <router-link
                variant="primary"
                to="/expert/create"
                class="btn btn-primary"
                >Создать эксперта</router-link
            >
        </b-jumbotron>
        <div v-if="!experts[0]" class="container">
            <h1 class="text-center">Эксперты еще не созданы</h1>
        </div>
        <div v-for="expert in experts" :key="expert.id" class="container">
            <b-card header-tag="header" :title="expert.last_name + ' ' + expert.first_name" class="">
                <b-card-text>email: {{ expert.email }}</b-card-text>
                <b-card-text>Должность: {{ expert.position }}</b-card-text>
                <b-card-text>Идентификатор эксперта: {{expert.id}}</b-card-text>
                <div>
                    <router-link
                        :to="`/expert/${expert.id}`"
                        variant="primary"
                        class="btn btn-primary"
                        >Открыть</router-link
                    >

                    <router-link
                        style="margin-left:10px"
                        :to="`/expert/update/${expert.id}`"
                        variant="primary"
                        class="btn btn-primary"
                        >Изменить</router-link
                    >
                </div>
            </b-card>
        </div>
    </div>
</template>


<script>
export default {
    data () {
        return {
            experts: [],
            errors: []
        }
    },
    created() {
        this.$http.get('/expert')
        .then(response => {
            this.experts = response.data
        })
        .catch(e => {
            this.error.push(e)
        })
    }
}
</script>

<style>
</style>
